import { messages } from "share/common";
import React from "react";
import { connect } from "react-redux";
import Condition from "components/condition";
import { Form, Input, Select, Modal } from "antd";

const FormItem = Form.Item;
const { Option } = Select;
@Form.create()
class CreateContract extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      formData: {
        corpId: "",
        corpName: "",
        managerJobNo: "",
        contactsName: "",
        contactsMobile: "",
        jobName: "",
        province: "",
        city: "",
        scale: "",
      },
    };
    const commonPlaceholder = messages("common.please.input"); /*请输入*/
    this.inputFields = [
      {
        key: "corpId",
        label: messages("supplier-1.key768") /*企业ID*/,
        placeholder: messages("supplier-1.key868") /*自定义企业ID*/,
        required: true,
      },
      {
        key: "corpName",
        label: messages("supplier-1.key869") /*企业名称*/,
        placeholder: commonPlaceholder,
        required: true,
      },
      {
        key: "managerJobNo",
        label: messages("supplier-1.key870") /*管理员员工编号*/,
        placeholder: commonPlaceholder,
        required: true,
      },
      {
        key: "contactsName",
        label: messages("supplier-1.key871") /*企业联系人*/,
        placeholder: commonPlaceholder,
        required: true,
      },
      {
        key: "contactsMobile",
        label: messages("supplier-1.key872") /*企业联系人电话*/,
        placeholder: commonPlaceholder,
        required: true,
      },
      {
        key: "jobName",
        label: messages("supplier-1.key873") /*行业*/,
        placeholder: commonPlaceholder,
        required: false,
      },
      {
        key: "province",
        label: messages("supplier-1.key874") /*所在地（省）*/,
        placeholder: messages("supplier-1.key620") /*省*/,
        required: false,
      },
      {
        key: "city",
        label: messages("supplier-1.key875") /*所在地（市）*/,
        placeholder: messages("supplier-1.key621") /*市*/,
        required: false,
      },
    ];
    this.scaleOptions = [
      {
        label: messages("supplier-1.key876") /*5万以下*/,
        value: 1,
      },
      {
        label: messages("supplier-1.key877") /*5万-20万*/,
        value: 2,
      },
      {
        label: messages("supplier-1.key878") /*20万-50万*/,
        value: 3,
      },
      {
        label: messages("supplier-1.key879") /*50万以上*/,
        value: 4,
      },
    ];
  }

  modalOnCancel = () => {
    this.props.form.resetFields();
    this.props.onCancel && this.props.onCancel();
  };

  // 保存提交
  onSubmitEdit = () => {
    if (this.loading) {
      return;
    }
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.onOk && this.props.onOk(values);
        this.props.form.resetFields();
      }
    });
  };

  render() {
    const { visible } = this.props;
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { loading, formData } = this.state;
    const formLayout = {
      labelCol: { span: 6, offset: 1 },
      wrapperCol: { span: 14 },
    };
    return (
      <Modal
        maskClosable
        visible={visible}
        title={messages("supplier-1.key880") /*新建签约*/}
        onCancel={this.modalOnCancel}
        onOk={this.onSubmitEdit}
      >
        <div className="modal-create-contract">
          <Form className="new-form">
            {this.inputFields.map((field) => {
              return (
                <FormItem label={field.label} {...formLayout}>
                  {getFieldDecorator(`${field.key}`, {
                    initialValue: formData[field] || "",
                    rules: [
                      {
                        required: field.required,
                        message: field.required ? messages("supplier-1.key193") /*必填*/ : "",
                      },
                    ],
                  })(<Input placeholder={field.placeholder} />)}
                </FormItem>
              );
            })}
            <FormItem label={messages("supplier-1.key881") /*差旅规模*/} {...formLayout}>
              {getFieldDecorator(
                `scale`,
                {}
              )(
                <Select placeholder={messages("common.select") /*请选择*/}>
                  {this.scaleOptions.map((scale) => {
                    return (
                      <Option key={scale.value} value={scale.value}>
                        {scale.label}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
          </Form>
        </div>
      </Modal>
    );
  }
}

function mapStateToProps(state) {
  return {
    tenant: state.login.tenant,
    company: state.login.company,
    language: state.main.language,
  };
}

export default connect(mapStateToProps)(CreateContract);
